<template>
    <div>
        <a-modal
            :title="view?'查看解聘信息':(formState.isType?'恢复审评员':'解聘审评员')"
            :visible="visible"
            @ok="handleOk"
            :maskClosable="false"
            @cancel="visible = false"
        >
            <template slot="footer">
                <a-button v-if="!view" key="back" @click="visible = false">取消</a-button>
                <a-button v-if="!view" class="blue-btn" key="submit" type="primary" @click="handleOk"> 确定</a-button>
            </template>
            <div class="nonReappointment-operation-item">
                <a-form-model
                    :id="randomId"
                    class="form-model-big-box form-model-big-box1"
                    ref="ruleForm1"
                    :model="formState"
                    :rules="rules"
                    layout="inline"
                >
                    <a-form-model-item :label="formState.isType?'恢复时间':'解聘时间'" prop="fjpsj" class="form-item-flex-1">
                        <a-date-picker v-if="!view" v-model="formState.fjpsj"/>
                        <span v-else>{{ moment(formState.fjpsj).format('YYYY-MM-DD') }}</span>
                    </a-form-model-item>
                    <a-form-model-item :label="formState.isType?'恢复理由':'解聘原因'" prop="fjply" class="form-item-flex-1">
                        <a-textarea 
                            v-if="!view"
                            style="max-width: 465px;"
                            v-model="formState.fjply"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                            :placeholder="'请输入'+(formState.isType?'恢复理由':'解聘原因')"
                        ></a-textarea>
                        <span v-else>{{ formState.fjply }}</span>
                    </a-form-model-item>
                    <a-form-model-item v-if="!formState.isType" label="解聘文号" prop="fjpwh" class="form-item-flex-1">
                        <a-input 
                            v-if="!view"
                            style="max-width: 465px;"
                            v-model="formState.fjpwh"
                            placeholder='请输入解聘文号'
                        ></a-input>
                        <span v-else>{{ formState.fjpwh }}</span>
                    </a-form-model-item>
                    <a-form-model-item v-if="!formState.isType" label="解聘文件" prop="fjpfjdz" class="form-item-flex-1">
                        <div class="fawwj-fileList-box" v-if="formState.fjpfjdz" style="display: flex;align-items: center;flex-direction: row;height: auto;width: 130px;">
                            <div class="toolbox-file-coontern" style="margin-right: 5px;">
                                <a-tooltip placement="rightBottom">
                                    <template slot="title">
                                    <span>
                                        <a target="\_blank" :href="formState.fjpfjdz">解聘附件</a>
                                    </span>
                                    </template>
                                    <span class="toolbox-file-name" style="-webkit-line-clamp: 1;"><a href="#">解聘附件</a></span>
                                </a-tooltip>
                                
                            </div>
                            <div class="fileList-icon-btn" style="flex: none;">
                                <a-upload v-if="!view" style="display: inline-block;" :showUploadList="false" :beforeUpload="$evevt=>{return false}" action="" @change="uploadClick">
                                    <a-icon type="upload" class="toolbox-upload-icon-type"/>
                                </a-upload>
                                <a target="\_blank" :href="formState.fjpfjdz"><a-icon type="eye" class="toolbox-eye-icon-type" style="padding: 0;margin: 0;margin-right: 5px;" /></a>
                                
                            </div>
                        </div>
                        <div>
                            <a-upload v-if="!formState.fjpfjdz && !view" style="display: inline-block;" :showUploadList="false" :beforeUpload="$evevt=>{return false}" action="" @change="uploadClick">
                                <a-button style="margin-right: 10px;" icon="upload" type="primary" ghost>上传文件</a-button>
                            </a-upload>
                            <span v-if="!view" style="color: #ed5565;">（请上传pdf文件）</span>
                        </div>
                        
                        <!-- <a-input 
                            style="max-width: 465px;display: none;"
                            v-model="formState.fjpfjdz"
                            placeholder='请输入解聘文号'
                        ></a-input> -->
                    </a-form-model-item>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {
    jcyjpdjyjpdjByHf,
    jcyjpdjjpdjByJp,
    jcyjpdjuploadBatchFile,
    jcyjpdjqueryJpdjById,
} from './service/index'
import moment from 'moment'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visible:false,
            formState:{
                
            },
            randomId:'formModel'+new Date().getTime(),
            rules: {
                fjply: [{ required: true, message: '请输入理由', trigger: 'blur' }],
                fjpwh: [{ required: true, message: '请输入解聘文号', trigger: 'blur' }],
                fjpfjdz: [{ required: true, message: '请上传解聘文件', trigger: 'blur' }],
            },
            view:false,
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(row,view){
            this.view = view
            this.formState = {...row,fjpsj:moment(),}
            let that = this
            this.$nextTick(()=>{//表格所有标题样式
                setTimeout(() => {
                    that.getFormLabelStyle(that.randomId)
                }, 200)
            })
            if(view){
                jcyjpdjqueryJpdjById({id:row.id}).then(res=>{
                    if(res.code == 200){
                        //console.log(res)
                        this.formState = res.result
                    }
                })
            }
        },
        getFormLabelStyle(id,val){
            var parentElement = document.getElementById(id)//要不一样的id，避免不同组件加载到一样的
            var elements = parentElement.getElementsByClassName("ant-form-item");
            for (var i = 0; i < elements.length; i++) {
                let element = elements[i]
                if(element){
                    let itemLabel = elements[i].getElementsByClassName('ant-form-item-label')
                    if(itemLabel.length && itemLabel[0].getElementsByTagName('label').length){
                        itemLabel[0].getElementsByTagName('label')[0].style = 
                        'width:90px;display: flex;align-items: center;justify-content: flex-end;font-weight: 600;font-family:simHei;'
                    }
                }
            }
        },
        uploadClick({file}){//上传
            if(!(file.name.indexOf('.pdf') !== -1)){
                this.$message.warning('请上传pdf文件')
                return false
            }
            const fileData = new FormData();
            fileData.append("ids",this.formState.ids);
            fileData.append("file",file);
            jcyjpdjuploadBatchFile(fileData).then(res=>{
                if(res.code !== 200){
                    this.$message.warning(res.message)
                }else{
                    this.formState = {
                        fjpfjdz:res.result,
                        ...this.formState
                    }
                    // this.$emit('generateListClick')
                    this.$message.success('上传成功')
                }
            })
        },
        handleOk(){
            if(!this.view){
                this.$refs.ruleForm1.validate(valid => {
                    if (valid) {
                        let data = {}
                        if(this.formState.isType){
                            data = {
                                ids:this.formState.id,
                                fhfsj:moment(this.formState.fjpsj).format('YYYY-MM-DD'),
                                fhfly:this.formState.fjply,
                            }
                            jcyjpdjyjpdjByHf(data).then(res=>{
                                if(res.code == 200){
                                    this.$message.success(res.message)
                                    this.$emit('generateListClick')
                                    this.visible = false
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }else{
                            data = {
                                ids:this.formState.ids,
                                fjpsj:moment(this.formState.fjpsj).format('YYYY-MM-DD'),
                                fjply:this.formState.fjply,
                            }
                            jcyjpdjjpdjByJp(data).then(res=>{
                                if(res.code == 200){
                                    this.$message.success(res.message)
                                    this.$emit('generateListClick')
                                    this.visible = false
                                }else{
                                    this.$message.warning(res.message)
                                }
                            })
                        }
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
                });
            }else{
                this.visible = false
            }
        }
    }
}
</script>
<style lang="less">
.nonReappointment-operation-item{
    .form-model-big-box{
        .form-item-flex-1{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;
                .ant-form-item-control{
                    flex: 1;
                }
                
            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;
            display: flex;
            align-items: center;
            .ant-checkbox-group{
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .form-model-big-box1{
        .ant-form-item-label{
            
            margin: 4px 3px;
            label{
                padding-left: 3px;
                background: #f0f5ff;
            }
            
        }
    }
    .ant-form-inline .ant-form-item > .ant-form-item-label{
        vertical-align: middle !important;
    }
    .fawwj-fileList-box{
        padding: 0 5px;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        border: 1px solid #d9d9d9;
        .fileList-icon-btn{
            flex: 1;
            display: flex;
            justify-content: space-around;
            .toolbox-filePdf-icon-type{
                font-size: 40px;
                color: #229dfc;
                display: inline-block;
                margin-top: 8px;
            }
            .left-icon-btn,.right-icon-btn{
                padding: 7px 0;
                width: 15px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            .toolbox-delete-icon-type{
                color: #ed5565;
            }
            .toolbox-eye-icon-type{
                color: #1ab394;
                display: inline-block;
                margin-top: 8px;
            }
            .toolbox-download-icon-type{
                color: #229dfc;
            }
            .toolbox-upload-icon-type{
                color: #229dfc;
                display: inline-block;
                // margin-top: 8px;
                margin-right: 10px;
            }
        }
        .toolbox-file-coontern{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 3px;
            height: 32px;
            .toolbox-file-name{
                
                flex: 1;
                text-align: center;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2; /* 控制最大行数 */
                -webkit-box-orient: vertical;
            }
        }
    }
}
</style>